<template>
  <div>
    <el-col
      :xs="24"
      :md="12"
      :lg="8"
      :xl="6"
      v-for="item in classifys"
      :key="item.id"
      style="text-align: center"
    >
      <!-- @click="getArticles(item.id,item) -->
      <div class="card" @click="goSort(item)">
        <!-- <router-link  to="/classifyDetail2"> -->
          <el-card class="classify">
            <div>
              <img :src="item.avatar" class="image" />
            </div>

            <div style="padding: 14px; text-align: center">
              <span class="classifyChild">{{ item.name }}</span>
              <div class="bottom clearfix">
                <time class="time">{{ item.described }}</time>
              </div>
            </div>
          </el-card>
        <!-- </router-link> -->

        
      </div>
    </el-col>
  </div>
</template>

<script>


export default {
  data() {
    return {};
  },
  props: ["classifys"],
  methods: {
    goSort(item){
      if(item.sortName!==undefined){
        return this.$router.push({
          name:'classifyDetail2',
          query:{
            'sortId':item.id,
            'item':JSON.stringify(item)
            // 'avatar':item.avatar,
            // 'name':item.name,
            // 'described':item.described
          }

        })
      }
      return this.$router.push({
        name:'classifyDetail2',
          query:{
            'tagId':item.id,
            'item':JSON.stringify(item)
          }

        })
    }
  },
};
</script>

<style>
.card {
  padding: 10px;
}
.time {
  font-size: 14px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100px;
  height: 100px;

  display: inline-block;
  vertical-align: middle;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.classify {
  height: 300px;
  width: 300px;
  text-align: center;
}
.classifyChild {
  font-size: 20px;
  font-weight: bold;
}
a {
  text-decoration:none
}
</style>